<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>联系我们</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css//swiper.css">
  <link rel="stylesheet" href="css//main.css">
</head>

<body>
  <div class="nav-list">
    <div class="container">
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="index.html"> <img src="images/logo.png" alt="" class="hidden-xs"> <img src="images/logo_2.png" alt="" class="hidden-sm"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.html">首页 </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="AboutUs.html">关于我们</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="News.html">新闻资讯</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="Product.html">产品展馆</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="Cooperation.html">合作发展</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="ContactUs.html">联系我们</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
  <div class="swiper-container swiper-container-banner">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="images/banner_01.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img src="images/banner_02.jpg" alt="">
      </div>
    </div>
    <!-- Add Scrollbar -->
    <div class="swiper-scrollbar"></div>
    <div class="navbreadcrumb">
      <div class="container">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <div class="container"></div>
            <li class="breadcrumb-item"><a href="index.html">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">联系我们</li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
  <div class="btn_group">
    <div class="container mt-4 mb-4 pb-4">
      <button class="btn mr-2">联系我们</button>
    </div>
  </div>
  <div class="container mb-4 ContactUs">
    <div class="row">
      <div class="col-sm-8">
        <!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">

        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
          <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
          <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
          <title>百度地图API自定义地图</title>
          <!--引用百度地图API-->
          <style type="text/css">
            html,
            body {
              margin: 0;
              padding: 0;
            }

            .iw_poi_title {
              color: #CC5522;
              font-size: 14px;
              font-weight: bold;
              overflow: hidden;
              padding-right: 13px;
              white-space: nowrap
            }

            .iw_poi_content {
              font: 12px arial, sans-serif;
              overflow: visible;
              padding-top: 4px;
              white-space: -moz-pre-wrap;
              word-wrap: break-word
            }
          </style>
          <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
        </head>

        <body>
          <!--百度地图容器-->
          <div style="width:100%;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
        </body>
        <script type="text/javascript">
          //创建和初始化地图函数：
          function initMap() {
            createMap(); //创建地图
            setMapEvent(); //设置地图事件
            addMapControl(); //向地图添加控件
            addMarker(); //向地图中添加marker
          }

          //创建地图函数：
          function createMap() {
            var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
            var point = new BMap.Point(113.341564, 22.976877); //定义一个中心点坐标
            map.centerAndZoom(point, 17); //设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map; //将map变量存储在全局
          }

          //地图事件设置函数：
          function setMapEvent() {
            map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
            map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
            map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
            map.enableKeyboard(); //启用键盘上下左右键移动地图
          }

          //地图控件添加函数：
          function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({
              anchor: BMAP_ANCHOR_TOP_LEFT,
              type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({
              anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
              isOpen: 1
            });
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({
              anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrl_sca);
          }

          //标注点数组
          var markerArr = [{
            title: "祈福集团",
            content: "祈福集团",
            point: "113.331566|22.976095",
            isOpen: 0,
            icon: {
              w: 21,
              h: 21,
              l: 0,
              t: 0,
              x: 6,
              lb: 5
            }
          }];
          //创建marker
          function addMarker() {
            for (var i = 0; i < markerArr.length; i++) {
              var json = markerArr[i];
              var p0 = json.point.split("|")[0];
              var p1 = json.point.split("|")[1];
              var point = new BMap.Point(p0, p1);
              var iconImg = createIcon(json.icon);
              var marker = new BMap.Marker(point, {
                icon: iconImg
              });
              var iw = createInfoWindow(i);
              var label = new BMap.Label(json.title, {
                "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)
              });
              marker.setLabel(label);
              map.addOverlay(marker);
              label.setStyle({
                borderColor: "#808080",
                color: "#333",
                cursor: "pointer"
              });

              (function () {
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click", function () {
                  this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open", function () {
                  _marker.getLabel().hide();
                })
                _iw.addEventListener("close", function () {
                  _marker.getLabel().show();
                })
                label.addEventListener("click", function () {
                  _marker.openInfoWindow(_iw);
                })
                if (!!json.isOpen) {
                  label.hide();
                  _marker.openInfoWindow(_iw);
                }
              })()
            }
          }
          //创建InfoWindow
          function createInfoWindow(i) {
            var json = markerArr[i];
            var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title +
              "</b><div class='iw_poi_content'>" + json.content + "</div>");
            return iw;
          }
          //创建一个Icon
          function createIcon(json) {
            var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
              imageOffset: new BMap.Size(-json.l, -json.t),
              infoWindowOffset: new BMap.Size(json.lb + 5, 1),
              offset: new BMap.Size(json.x, json.h)
            })
            return icon;
          }

          initMap(); //创建和初始化地图
        </script>

        </html>
      </div>
      <div class="col-sm-4">
        <h4 class="mb-4">在线留言</h4>
        <small id="emailHelp" class="form-text text-muted mb-4">我们可以根据您的需求为您推荐合适的产品，请您填写以下表格，我们会及时联系您！ </small>
        <form>
          <div class="form-group">
            <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
              placeholder="请输入姓名">
          </div>
          <div class="form-group">

            <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
              placeholder="请输入电话">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
              placeholder="请输入地址">
          </div>
          <div class="form-group">
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="请输入留言信息"></textarea>
          </div>
          <button type="submit" class="btn btn-primary" style="width: 50%;font-size: 14px;">提交</button>
        </form>
      </div>
    </div>
  </div>

  <div class="footer d-flex align-items-center">
    <div class="container">
      <ul class="nav justify-content-center">
        <li class="nav-item">
          <a class="nav-link" href="index.html">首页 </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="AboutUs.html">关于我们</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="News.html">新闻资讯</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">产品展馆</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">合作发展</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">联系我们</a>
        </li>
      </ul>
      <div class="d-flex justify-content-center">
        <span>电话：400-XXX-11223345</span>
        <span>地址：XXX省XXX市XXX区XXX街道XXX号</span>
      </div>
      <div class="d-flex justify-content-center">
        Copyright © 20019-2025 京ICP备1200XXXX号
      </div>
    </div>

  </div>
  <a class="bshareDiv" href="http://www.bshare.cn/share">分享按钮</a>
  <script type="text/javascript" charset="utf-8"
    src="http://static.bshare.cn/b/buttonLite.js#uuid=&amp;style=3&amp;fs=4&amp;textcolor=#fff&amp;bgcolor=#F60&amp;text=分享到">
  </script>

</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/swiper.min.js"></script>
<script>
  var swiper = new Swiper('.swiper-container-banner', {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    speed: 1500,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });
</script>

</html>